<template>
	<view class="page-form">
		<view class="input-group">
			<view class="input-row border">
				<m-input type="text" clearable v-model="company" placeholder="请输入公司名称"></m-input>
			</view>
			<view class="input-row border">
				<m-input type="text" clearable v-model="customerName" placeholder="请输入姓名"></m-input>
			</view>
			<view class="input-row border">
				<m-input type="phone" clearable v-model="phone" placeholder="请输入电话"></m-input>
			</view>

		</view>
		<view class="btn-row">
			<button type="primary" class="primary" :loading="loginBtnLoading" @tap="addCustomer">确定</button>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		saveCustomer
	} from '@/api/typeManager.js'

	export default {
		data() {
			return {
				company: '',
				customerName: '',
				phone: '',
				loginBtnLoading: false,
			}
		},
		onLoad() {

		},
		methods: {
			async addCustomer() {
				if (!this.company) {
					uni.showToast({
						title:'请输入公司名称'
					})
					return
				} else  if(!this.customerName) {
					uni.showToast({
						title:'请输入客户姓名'
					})
					return
				}else if (!this.phone) {
					uni.showToast({
						title:'请输入电话'
					})
					return
				}

				this.loginBtnLoading = true
				const res = await saveCustomer({
					company: this.company,
					customerName: this.customerName,
					phone: this.phone
				})
				this.loginBtnLoading = false
				uni.navigateBack()


			}
		}
	};
</script>
<style>
	.page-form {
		padding: 28rpx;
	}

	.title {
		line-height: 60rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.input-group {
		background-color: #ffffff;

		position: relative;
		/* width: 610rpx; */

		margin: 0 auto;
	}

	.input-row {
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		position: relative;
		width: 610rpx;
		max-width: 460px;
		height: 51.5px;
		line-height: 40px;
	}


	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #FFFFFF;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.btn-row {
		margin-top: 100px;
		/* margin-top: 0px; */
		border-radius: 4px;
	}
</style>